<script>
import axios from 'axios';
import {ref} from 'vue'
import {Search} from "@element-plus/icons-vue";
export default {

  computed: {
    Search() {
      return Search
    }
  },
  data() {

    return {
      input3:'',
      images: [
        'Win1.jpg',
        'Win2.jpg',
        'Win3.jpg',
        'Win4.jpg',
        'Win5.jpg',
        'Win6.jpg'
      ],
      user: {
        avatar: require('@/assets/index_notlogin/tx.jpg'),
        name: 'Alice',
      },

      // 这部分是高级用户列表
      user2: {
        // 注意这玩意的只是一个路径，至于头像本身，可以不用从后端传过来
        avatar: require('@/assets/index_notlogin/tx.jpg'),
        name: 'Alice',
        field: '移动开发',
        tag: '高级用户',
      },
      articles: [],
    };
  },
  created() {
    axios.get('http://localhost:8080/resource/show')
        .then(response => {
          if (response.data.code === 1) {
            let articles = response.data.data || []; // 确保有数据
            if (articles.length !== 0) {
              // 如果后端返回多条数据，将整个数组复制5次
              this.articles = [].concat(...Array(5).fill(articles));
            } else {
              console.log('No articles found');
            }
          } else {
            console.error('Error: ', response.data.msg);
          }
        })
        .catch(error => {
          console.error('Error fetching article data:', error);
        });
  }
};



</script>

<template>
  <el-backtop :right="100" :bottom="100"/>
  <div class="body">
    <el-row :gutter="16">
      <el-col :span="8">
        <div class="statistic-card">
          <el-statistic :value="98500">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                日活用户
                <el-tooltip
                    effect="dark"
                    content="一日内有过登录活动的用户数目"
                    placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning/>
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>相较昨日</span>
              <span class="red">
              4%
              <el-icon>
                <CaretBottom/>
              </el-icon>
            </span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="statistic-card">
          <el-statistic :value="693700">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                月活用户
                <el-tooltip
                    effect="dark"
                    content="一个月内登录的用户数量"
                    placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning/>
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>相较上月</span>
              <span class="green">
              12%
              <el-icon>
                <CaretTop/>
              </el-icon>
            </span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="statistic-card">
          <el-statistic :value="72000" title="新发布的资源帖">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                今日新发布
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>相较昨日</span>
              <span class="green">
              16%
              <el-icon>
                <CaretTop/>
              </el-icon>
            </span>
            </div>
            <div class="footer-item">
              <el-icon :size="14">
                <ArrowRight/>
              </el-icon>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="left">
      <br>
      <br>
      <br>

      <div class="img_recommend">
        <div class="first">
          <router-link to="/article2">
            <span>深度神经网络训练的必知技巧</span>
          </router-link>
        </div>
        <div class="second">
          <router-link to="/article3">
            <span>ChatGPT如何改变人机交互规则</span>
          </router-link>
        </div>
      </div>
      <br>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="(image, index) in images" :key="index">
          <img :src="require(`@/assets/indexImage/${image}`)" alt="图片" class="carousel-image"/>
        </el-carousel-item>
      </el-carousel>
      <ul class="ul">
        <li class="li1">
          <router-link to="/technology">技术文章</router-link>
        </li>
        <li class="li2">
<!--          <router-link to="/news">前沿资讯</router-link>-->
          <router-link to="/require-login">前沿资讯</router-link>

        </li>
      </ul>
      <div class="essay_recommend">
        <div v-for="(article, index) in articles" :key="index" class="essay">
          <div class="user">
            <a>
              <img :src="user.avatar" alt="User Avatar" />
            </a>
            <a>
              <span>{{ user.name }}</span>
            </a>
          </div>
          <div class="content">
            <router-link :to="article.link" class="title">
              {{ article.title }}
            </router-link>
            <p>{{ article.description }}</p>
            <div class="article">
              <router-link to="/category" class="category">{{ article.category }}</router-link>
            </div>
            <span class="time">{{ article.time }}</span>

              <View style="width: 1em; height: 14px;" />

            <span class="times">{{ article.views }}</span>
          </div>
        </div>
      </div>
      <br>
      <el-pagination background layout="prev, pager, next" :total="1000"/>
      <br>
    </div>
    <div class="right">·
      <br>
      <br>
      <br>
      <div class="search-input" style="margin-left:20px">
        <el-input
            v-model="input3"
            style="width: 330px"
            size="large"
            placeholder="搜索全站文章、资源"
            :prefix-icon="Search"
        />
      </div>

      <br>
      <div class="new_export">
        <span class="contact_title">高级用户</span>
        <br>
        <h3 style="margin-left: 20px;color: #475669">这些是各自领域的专家博主</h3>
        <div class="user-list">
          <div class="user-card">
            <img class="user-avatar" :src="user2.avatar" alt="头像"/>
            <div class="user-info">
              <h3 class="user-name">{{ user2.name }}</h3>
              <p class="user-field">{{ user2.field }}</p>
            </div>
            <div class="user-tag">
              <span class="tag">{{ user2.tag }}</span>
            </div>
          </div>
          <div class="user-card">
            <img class="user-avatar" :src="user2.avatar" alt="头像"/>
            <div class="user-info">
              <h3 class="user-name">{{ user2.name }}</h3>
              <p class="user-field">{{ user2.field }}</p>
            </div>
            <div class="user-tag">
              <span class="tag">{{ user2.tag }}</span>
            </div>
          </div>
          <div class="user-card">
            <img class="user-avatar" :src="user2.avatar" alt="头像"/>
            <div class="user-info">
              <h3 class="user-name">{{ user2.name }}</h3>
              <p class="user-field">{{ user2.field }}</p>
            </div>
            <div class="user-tag">
              <span class="tag">{{ user2.tag }}</span>
            </div>
          </div>
          <div class="user-card">
            <img class="user-avatar" :src="user2.avatar" alt="头像"/>
            <div class="user-info">
              <h3 class="user-name">{{ user2.name }}</h3>
              <p class="user-field">{{ user2.field }}</p>
            </div>
            <div class="user-tag">
              <span class="tag">{{ user2.tag }}</span>
            </div>
          </div>
          <div class="user-card">
            <img class="user-avatar" :src="user2.avatar" alt="头像"/>
            <div class="user-info">
              <h3 class="user-name">{{ user2.name }}</h3>
              <p class="user-field">{{ user2.field }}</p>
            </div>
            <div class="user-tag">
              <span class="tag">{{ user2.tag }}</span>
            </div>
          </div>
          <div class="user-action">
            <router-link to="/apply">
              <el-button type="danger">申请成为高级用户</el-button>
            </router-link>
          </div>
        </div>
      </div>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <span class="contact_title">更新时间线</span>
      <el-timeline style="max-width: 600px">
        <el-timeline-item timestamp="2024/10/15 16:28" placement="top">
          <el-card>
            <h4 style="color: #475669">合并远程更改，修复显示bug</h4>
            <p>OrangeYooooo 今天 16:28</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/10/15 16:19" placement="top">
          <el-card>
            <h4 style="color: #475669">增补标签页，完善文章展示</h4>
            <p>OrangeYooooo 今天 16:19</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/10/12 08:24" placement="top">
          <el-card>
            <h4 style="color: #475669">add LICENSE</h4>
            <p>OraYoo* 2024/10/12, 08:24</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/10/12 08:22" placement="top">
          <el-card>
            <h4 style="color: #475669">修复小问题</h4>
            <p>OrangeYooooo 2024/10/12, 08:22</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/10/11 20:48" placement="top">
          <el-card>
            <h4 style="color: #475669">后端加入，index.vue面向后端启用数据接收</h4>
            <p>OrangeYooooo 2024/10/11, 20:48</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/10/09 21:30" placement="top">
          <el-card>
            <h4 style="color: #475669">整理代码，准备前后端联调</h4>
            <p>OrangeYooooo 2024/10/09, 21:30</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/10/07 23:11" placement="top">
          <el-card>
            <h4 style="color: #475669">部分适应后端接口，优化页面展示逻辑</h4>
            <p>OrangeYooooo 2024/10/07, 23:11</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/09/30 08:23" placement="top">
          <el-card>
            <h4 style="color: #475669">优化细节，添加圆角和阴影</h4>
            <p>OrangeYooooo 2024/09/30, 08:23</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/09/29 21:27" placement="top">
          <el-card>
            <h4 style="color: #475669">使用git管理依赖文件</h4>
            <p>OrangeYooooo 2024/09/29, 21:27</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/09/29 16:47" placement="top">
          <el-card>
            <h4 style="color: #475669">引入了一批 ElementPlus 组件，替换原有元素</h4>
            <p>OrangeYooooo 2024/09/29, 16:47</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/09/29 16:47" placement="top">
          <el-card>
            <h4 style="color: #475669">优化界面显示，剔除冗余代码</h4>
            <p>OrangeYooooo 2024/09/29, 16:47</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/09/27 16:50" placement="top">
          <el-card>
            <h4 style="color: #475669">添加并完善前端路由 todo过渡动画</h4>
            <p>OrangeYooooo 2024/09/27, 16:50</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/09/27 16:23" placement="top">
          <el-card>
            <h4 style="color: #475669">对齐页面元素，优化布局显示，适配字体</h4>
            <p>OrangeYooooo 2024/09/27, 16:23</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/09/27 16:09" placement="top">
          <el-card>
            <h4 style="color: #475669">基本框架完成，精简项目文件</h4>
            <p>OrangeYooooo 2024/09/27, 16:09</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/09/26 20:51" placement="top">
          <el-card>
            <h4 style="color: #475669">个人主页，上传文件和资源的功能</h4>
            <p>OrangeYooooo 2024/09/26, 20:51</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/09/26 17:09" placement="top">
          <el-card>
            <h4 style="color: #475669">登录，注册功能的实现</h4>
            <p>OrangeYooooo 2024/09/26, 17:09</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/09/26 16:33" placement="top">
          <el-card>
            <h4 style="color: #475669">第一次提交</h4>
            <p>OrangeYooooo 2024/09/26, 16:33</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>


      <br>
      <br>
      <br>
      <br>
      <br>

    </div>

  </div>


</template>

<style scoped>
/* 设置容器的样式 */
a {
  display: inline-block; /* 保持 a 标签为行内块，避免元素折行 */
}

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #808080;
}

.title1 li {
  display: inline-block;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: bold;
}

.title1 li a {
  text-decoration: none;
  color: #333; /* 默认字体颜色 */
  transition: color 0.3s, background-color 0.3s; /* 过渡效果 */
}

.title1 li a:hover {
  color: #3498db; /* 悬停时字体颜色 */
  background-color: #eaf2fb; /* 悬停时背景色 */
  border-radius: 8px;
}

.title1 li a:active {
  color: #2980b9; /* 点击时颜色 */
}

.title1 .li1 a {
  color: #e74c3c; /* 特殊样式，比如首页高亮 */
}

.title1 li a:visited {
  color: #7f8c8d; /* 已访问链接颜色 */
}


/*推荐文章*/
.left {
  float: left;
  overflow: hidden;
  width: 880px;
}

.img_recommend {
  display: flex;
  width: 100%;
  height: 320px;
  position: relative;
}

.img_recommend .first,
.img_recommend .second {
  position: relative;
  width: 450px;
  height: 320px;
  background-size: cover;
  transition: transform 0.5s ease, background-size 0.5s ease;
  overflow: hidden;
}

.img_recommend .first {
  background-image: url('@/assets/index_notlogin/network.jpeg');
}

.img_recommend .second {
  width: 430px;
  background-image: url('@/assets/index_notlogin/gpt.jpg');
  margin-left: 20px;
}

.img_recommend .first:hover,
.img_recommend .second:hover {
  transform: scale(1.1); /* 放大效果 */
}

.img_recommend .first:hover::before,
.img_recommend .second:hover::before {
  background: rgba(0, 0, 0, 0.5); /* 显示遮罩 */
}

.img_recommend .first::before,
.img_recommend .second::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* 默认遮罩颜色 */
  transition: background 0.5s ease;
}

.img_recommend .first > a,
.img_recommend .second > a {
  position: absolute;
  left: 30px;
  bottom: 90px;
  color: white;
  font-size: 24px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* 增加文字阴影 */
  z-index: 2;
}

.img_recommend .first img,
.img_recommend .second img {
  width: 40px;
  position: absolute;
  left: 40px;
  bottom: 35px;
  z-index: 2;
}


/* 动画定义 */
@-webkit-keyframes myfirst {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

@-webkit-keyframes mysecond {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

/*小分类*/
.left .ul {
  border-bottom: 2px solid #DFDFDF;
  height: 50px;
  list-style: none;
  position: relative;
  margin-top: 20px;
}

.left .ul .li1 {
  border-bottom: 2px solid red;
  position: absolute;
  top: 20px;
  padding-bottom: 10px;
  margin-left: 20px;
}

.left .ul .li2 {
  position: absolute;
  left: 110px;
  top: 20px;
  padding-bottom: 10px;
}

.left .ul .li2:hover {
  border-bottom: 2px solid red;
}

/*文章推荐*/
.left .essay {
  margin-top: 50px;
  border-bottom: 1px solid #EFEFEF;
  overflow: hidden;
  height: 150px;
}


.left .content {
  width: 650px;
  height: 300px;
}

.left .content .title {
  color: black;
  font-size: 18px;
}

.left .content p {
  margin-left: 20px;
  font-size: 13px;
  color: #8A8A8A;
}

.left .content .category {
  color: #424242;
  font-size: 14px;
}

.left .content .time {
  display: inline-block;
  margin-left: 420px;
  font-size: 12px;
  color: #A6A3A2;
}

.left .content img {
  width: 18px;
  margin-left: 15px;
  margin-right: 1px;
}

.left .content .times {
  font-size: 14px;
  color: #575757;
}


/*右栏*/
.right {
  float: right;
  overflow: hidden;
  width: 350px;
  margin-left: 10px;
}

.expert_recommend a {
  display: inline-block;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 5px;
}

.expert_recommend .content ul {
  list-style: none;
  margin-left: 3px;
}

.expert_recommend .content img {
  width: 60px;
  padding-left: 12px;
}

.expert_recommend .content .bloger span {
  display: inline-block;
  padding-left: 30px;
  margin-top: 3px;
  font-size: 13px;
  color: #9F9F9F;
}

.essay {
  display: flex;
  flex-direction: row;
  border: 1px solid #e0e0e0;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.essay .user {
  width: 120px;
  text-align: center;
  margin-right: 20px;
}

.essay .user img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.essay .user span {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}

.essay .content {
  flex-grow: 1;
}

.essay .content .title {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
  text-decoration: none;
  margin-bottom: 10px;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 当文字过长时，显示省略号 */
}

.essay .content p {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
  line-height: 1.6;
}

.essay .content .category {
  font-size: 14px;
  color: #3498db;
  text-decoration: none;
  margin-right: 15px;
}

.essay .content .time {
  font-size: 14px;
  color: #999;
  margin-right: 15px;
}

.essay .content .times {
  margin-left: 10px;
  font-size: 14px;
  color: #999;
}

.essay .content img {
  vertical-align: middle;
  margin-right: 5px;
}

/*热文推荐*/

.right .essay_recommend ul {
  list-style: none;
}

.right .essay_recommend ul li {
  float: left;
  line-height: 50px;
  font-size: 13px;
  color: #353535;
  border-bottom: 2px dotted #E1E1E1;
}


.right .essay_recommend li:hover ul {
  display: block;
}

/*博文分类*/
.right .essay_category .title {
  display: inline-block;
  width: 280px;
  border-bottom: 1px solid #B3B3B3;
  font-size: 20px;
  color: black;
}

.right .essay_category ul {
  margin-top: 20px;
}

.right .essay_category ul .img2 {
  margin-left: 50px;
}

.right .essay_category ul li {
  height: 60px;
  font-size: 18px;
  padding-top: 28px;
  border-bottom: 1px dotted #CECECE
}

.right .essay_category ul li a:hover {
  color: #B02700;
}

/*最新专家*/

.right .new_export ul li {
  list-style: none;
  padding-top: 30px;
  border-bottom: 1px dotted #999999;
  overflow: hidden;
}

.right .new_export ul li img {
  float: left;
}

.right .new_export ul li p {
  width: 150px;
  float: left;
  margin-left: 20px;
  font-size: 12px;
  color: #979797;
  padding-bottom: 30px;
}

.right .new_export ul li p a {
  display: block;
  font-size: 16px;
}

.right .new_export ul li p a:hover {
  color: #EA2900;
}

/*联系我们*/
.right .contact .contact_title {
  display: inline-block;
  width: 290px;
  font-size: 20px;
  margin-top: 30px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #A3A3A3;
}

.right .contact a:hover {
  color: red;
}

.user-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-card {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 80%;
  max-width: 400px;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
}

.user-info {
  flex-grow: 1;
}

.user-name {
  margin: 0;
  font-size: 1.2em;
  color: #333;
}

.user-field {
  margin: 5px 0 0 0;
  color: #888;
}

.user-tag {
  display: flex;
  align-items: center;
}

.tag {
  background-color: #52c41a;
  color: #fff;
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 0.9em;
}

.user-action {
  margin-top: 10px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.carousel-image {
  align-items: center;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}

.red {
  color: var(--el-color-error);
}


.export_title {
  padding: 10px 0;
  font-size: 18px;
  font-weight: bold;
}

.title-content {
  display: inline-flex;
  align-items: center;
}

.warning-icon {
  margin-left: 4px;
  color: #f56c6c;
}

.contact_title {
  font-size: 24px; /* 字体大小 */
  font-weight: bold; /* 加粗字体 */
  color: #333; /* 颜色 */
  margin-bottom: 20px; /* 下方留空 */
  margin-left: 20px;
  text-align: center; /* 居中对齐 */
  border-bottom: 2px solid #409eff; /* 下划线 */
  padding-bottom: 5px; /* 让下划线与文字之间有点间距 */
  display: inline-block; /* 为了确保宽度只根据内容调整，且下划线显示正常 */
}
</style>